<template>
  <em-page class="tab-index" :em-styles="pageStyles">
    <em-scroller class="scroller" @scroll="scroll">
      <em-header-inset></em-header-inset>
      <!-- 轮播 -->
      <swiper class="carousel" :style="{'width': `${systemInfo.windowWidth}px`, 'height': `${systemInfo.windowWidth * 0.48}px`}" indicator-dots autoplay :interval="3000" circular>
        <swiper-item v-for="(x, xi) in carousels" :key="xi">
          <view class="carousel-item-box" :style="{'width': `${systemInfo.windowWidth}px`, 'height': `${systemInfo.windowWidth * 0.48}px`}">
            <view class="carousel-item" @click="$em.$navigateTo('/pages/hot/hot')">
              <image class="carousel-image" :style="{'height': `${systemInfo.windowWidth * 0.48}px`}" :src="x.image" mode="aspectFill"></image>
              <view class="carousel-show">
                <view class="carousel-word">
                  <text class="carousel-title">{{x.title}}</text>
                  <text class="carousel-info">{{x.info}}</text>
                </view>
                <view class="carousel-enter">
                  <em-icon class="carousel-enter-icon" :unicode="'\uea6e'"></em-icon>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <em-tab-bar-inset></em-tab-bar-inset>
    </em-scroller>
    <em-header class="header" title="云边杂货铺" :em-styles="headerStyles" :left-btns="headerLeftBtns" :right-btns="headerRightBtns" @clickBtn="clickHeaderBtn"></em-header>
  </em-page>
</template>

<script>
  import mixin from '../../mixins/tab'
  import {
    mapState
  } from 'vuex'

 let app = {}
 // #ifdef MP-WEIXIN || MP-KUAISHOU
 app = getApp({ allowDefault: true}).$vm
 // #endif
 // #ifdef APP-PLUS || H5
 app = getApp({allowDefault: true})
 // #endif

  export default {
    mixins: [mixin],
    data() {
      return {
        /* 轮播 */
        carousels: [],
        /* 专栏 */
        columns: [],
        /* 专题 */
        specials: [],
        /* 推荐 */
        goods: [],
        goodsPageIndex: 1,
        loadmoreState: 'loadmore'
      }
    },
    computed: {
      ...mapState([
        'systemInfo'
      ]),
      pageStyles() {
        return {
          wrap: app.$getThemeStyle(['bg-color--1'])
        }
      },
      headerStyles() {
        return {
          wrap: app.$getThemeStyle(['bg-color-1', 'shadow-1']),
          title: app.$getThemeStyle(['color-1'])
        }
      },
      headerLeftBtns() {
        return [{
          iconUnicode: '\uf0d1',
          styles: {
            btn: app.$getThemeStyle(['bg-color-103']),
            icon: app.$getThemeStyle(['color-103'])
          }
        }]
      },
      headerRightBtns() {
        return [{
          iconUnicode: '\ueae5',
          styles: {
            btn: app.$getThemeStyle(['bg-color-104']),
            icon: app.$getThemeStyle(['color-104'])
          }
        }]
      }
    },
    created() {
      this.$em = app.$em
    },
    methods: {
      load() {
        console.log('index on load')
        this.getCarouselList()
        this.getColumnList()
        this.getSpecialList()
        this.getGoodsList()
      },
      show() {
        console.log('index on show')
      },
      hide() {
        console.log('index on hide')
      },
      scroll(e) {
        if (e.scrollBottom <= 150) {
          this.loadmore()
        }
      },
      loadmore() {
        if (this.loadmoreState === 'loadmore') {
          console.log('index on loadmore')
          this.getGoodsList()
        }
      },
      getCarouselList() {
        app.$api.getCarouselList().then(res => {
          this.carousels = res.data
        })
      },
      getColumnList() {
        app.$api.getColumnList().then(res => {
          this.columns = res.data
        })
      },
      getSpecialList() {
        app.$api.getSpecialList().then(res => {
          this.specials = res.data
        })
      },
      getGoodsList() {
        this.loadmoreState = 'loading'
        app.$api.getGoodsList({
          pageIndex: this.goodsPageIndex,
          pageSize: 20
        }).then(res => {
          res.data.forEach((x, xi) => this.goods.push(x))
          if (this.goods.length >= res.total) {
            this.loadmoreState = 'nomore'
            return
          }
          this.goodsPageIndex++
          this.loadmoreState = 'loadmore'
        })
      },
      clickHeaderBtn(e) {
        if (e.position === 'left' && e.index === 0) {
          // 跳转到搜索页
          app.$switchTab('/pages/index/index', 'search')
        } else if (e.position === 'right' && e.index === 0) {
          // 跳转到收藏页
          app.$navigateTo('/pages/favorite/favorite')
        }
      }
    }
  }
</script>

<style>
  .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
  }

  .scroller {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

  .carousel {
    margin-top: 32px;
  }

  .carousel-item-box {
    flex-direction: row;
    padding: 0 28px;
  }

  .carousel-item {
    position: relative;
    flex-direction: row;
    flex: 1;
    border-radius: 12px;
    /* overflow: hidden; */
  }

  .carousel-image {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: block;
    width: 100%;
    /* #endif */
    border-radius: 12px;
    /* overflow: hidden; */
  }

  .carousel-show {
    position: absolute;
    right: 20px;
    bottom: 30px;
    left: 20px;
    flex-direction: row;
  }

  .carousel-word {
    flex: 1;
  }

  .carousel-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
  }

  .carousel-info {
    margin-top: 10px;
    font-size: 14px;
    color: #FFFFFF;
  }

  .carousel-enter {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #FFFFFF;
    border-radius: 9px;
  }

  .carousel-enter-icon {
    font-size: 22px;
    color: #292929;
  }

  .column {
    margin-top: 32px;
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .column-header-more-icon {
    font-size: 21px;
    font-weight: 700;
  }

  .column-scroll-view {
    flex-direction: row;
    flex: 1;
  }

  .column-list {
    flex-direction: row;
  }

  .column-item {
    padding: 0 16px 24px 0;
  }

  .column-item-first-child {
    padding-left: 28px;
  }

  .column-item-last-child {
    padding-right: 28px;
  }

  .column-item-image-wrap {
    position: relative;
  }

  .column-item-image {
    position: relative;
    z-index: 1;
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    width: 154px;
    height: 200px;
    border-radius: 12px;
  }

  .column-item-btn-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: #FFFFFF;
  }

  .column-item-btn-favorite-icon {
    font-size: 15px;
    color: #292929;
  }

  .column-item-title {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  .column-item-price {
    margin-top: 10px;
    font-size: 13px;
  }

  .special {
    padding: 28px;
  }

  .special-item {
    position: relative;
    margin-top: 28px;
    /* overflow: hidden; */
  }

  .special-item-first-child {
    margin-top: 0;
  }

  .special-item-image {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    border-radius: 12px;
  }

  .special-item-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 12px;
  }

  .special-item-word {
    position: absolute;
    justify-content: center;
    height: 80px;
    transform: translate(-50%, -50%);
  }

  .special-item-title {
    text-align: center;
    font-size: 29px;
    font-weight: 700;
    color: #FFFFFF;
  }

  .special-item-info {
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    color: #FFFFFF;
  }

  .special-item-enter-btn {
    position: absolute;
    bottom: 38px;
    justify-content: center;
    align-items: center;
    transform: translateX(-50%);
    width: 146px;
    height: 50px;
    text-align: center;
    background-color: #FFFFFF;
    border-radius: 12px;
  }

  .special-item-enter-btn-text {
    font-size: 14px;
    font-weight: 700;
    color: #292929;
  }

  .goods {
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .goods-list {
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 12px;
  }

  .goods-item {
    padding-bottom: 24px;
    margin-left: 16px;
  }

  .goods-item-image-wrap {
    position: relative;
  }

  .goods-item-image {
    position: relative;
    z-index: 1;
    flex: 1;
    /* #ifndef APP-NVUE */
    display: block;
    width: 100%;
    /* #endif */
    border-radius: 12px;
  }

  .goods-item-btn-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: #FFFFFF;
  }

  .goods-item-btn-favorite-icon {
    font-size: 15px;
    color: #292929;
  }

  .goods-item-title {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
  }

  .goods-item-price {
    margin-top: 10px;
    font-size: 13px;
  }

  .loadmore {
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .loadmore-text {
    font-size: 14px;
    font-weight: 700;
  }
</style>
